import React from 'react'
import { Calendar, Users, MapPin, Clock, Star } from 'lucide-react'
import { motion } from 'framer-motion'
import { cn } from '../utils/cn'

const Activities: React.FC = () => {
  // 模拟活动数据
  const activities = [
    {
      id: '1',
      title: '周末亲子绘本故事会',
      description: '专业老师带领，分享精彩绘本故事，培养孩子的阅读兴趣和想象力。活动现场还有互动游戏和小礼品赠送。',
      image: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=children%20storytelling%20session%20in%20cozy%20library%20setting%20warm%20lighting%20parents%20and%20kids%20sitting%20together%20professional%20storyteller&image_size=landscape_16_9',
      date: '2024-01-20',
      time: '14:00-16:00',
      location: '绘本岛体验中心（朝阳区）',
      price: 0,
      maxParticipants: 20,
      currentParticipants: 15,
      category: '故事会',
      rating: 4.9,
      instructor: '王老师（资深绘本阅读指导师）',
      requirements: '适合3-8岁儿童及家长',
      highlights: ['专业老师带领', '互动游戏', '小礼品赠送', '免费阅读指导']
    },
    {
      id: '2',
      title: '亲子手工制作课',
      description: '和孩子一起制作绘本主题手工，锻炼动手能力，增进亲子感情。提供所有制作材料，作品可带回家。',
      image: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=parents%20and%20children%20doing%20craft%20activities%20together%20colorful%20art%20supplies%20happy%20family%20moment%20creative%20workshop&image_size=landscape_16_9',
      date: '2024-01-27',
      time: '10:00-12:00',
      location: '创意工坊（海淀区）',
      price: 68,
      maxParticipants: 15,
      currentParticipants: 8,
      category: '手工课',
      rating: 4.7,
      instructor: '李老师（儿童美术教育专家）',
      requirements: '适合4-10岁儿童及家长',
      highlights: ['专业指导', '材料齐全', '作品可带走', '培养创造力']
    },
    {
      id: '3',
      title: '户外亲子阅读营',
      description: '在大自然中享受阅读的乐趣，结合户外游戏和自然观察，让孩子爱上阅读，亲近自然。',
      image: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=family%20reading%20outdoors%20in%20nature%20park%20picnic%20setting%20children%20and%20parents%20reading%20together%20sunshine%20green%20grass&image_size=landscape_16_9',
      date: '2024-02-03',
      time: '09:30-15:30',
      location: '奥林匹克森林公园',
      price: 128,
      maxParticipants: 12,
      currentParticipants: 5,
      category: '户外活动',
      rating: 4.8,
      instructor: '张老师（自然教育导师）',
      requirements: '适合5-12岁儿童及家长',
      highlights: ['亲近自然', '户外游戏', '自然观察', '野餐时光']
    },
    {
      id: '4',
      title: '绘本创作工作坊',
      description: '学习绘本创作的基本技巧，从故事构思到插画绘制，让孩子成为小作家，创作属于自己的绘本。',
      image: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=children%20creating%20their%20own%20storybooks%20drawing%20and%20writing%20creative%20workshop%20art%20supplies%20colorful%20environment&image_size=landscape_16_9',
      date: '2024-02-10',
      time: '14:00-17:00',
      location: '绘本岛创作室（西城区）',
      price: 158,
      maxParticipants: 10,
      currentParticipants: 3,
      category: '创作课',
      rating: 4.6,
      instructor: '陈老师（儿童创意写作导师）',
      requirements: '适合7-12岁儿童',
      highlights: ['创作技巧', '个人作品', '专业指导', '创意启发']
    }
  ]

  const ActivityCard: React.FC<{ activity: any }> = ({ activity }: { activity: any }) => {
    const progress = (activity.currentParticipants / activity.maxParticipants) * 100
    const isAlmostFull = progress >= 80
    const isFull = progress >= 100

    return (
      <motion.div
        whileHover={{ scale: 1.02 }}
        className="bg-white rounded-3xl shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-300"
      >
        <div className="aspect-video relative overflow-hidden">
          <img
            src={activity.image}
            alt={activity.title}
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div className="absolute top-4 right-4">
            <span className={cn(
              "px-3 py-1 rounded-full text-xs font-bold text-white",
              activity.price === 0 ? "bg-leaf-500" : "bg-primary-500"
            )}>
              {activity.price === 0 ? '免费' : `¥${activity.price}`}
            </span>
          </div>
          <div className="absolute bottom-4 left-4 right-4 text-white">
            <h3 className="text-xl font-bold mb-2">{activity.title}</h3>
            <div className="flex items-center space-x-4 text-sm">
              <div className="flex items-center space-x-1">
                <Star className="w-4 h-4 text-yellow-400 fill-current" />
                <span>{activity.rating}</span>
              </div>
              <div className="flex items-center space-x-1">
                <Users className="w-4 h-4" />
                <span>{activity.currentParticipants}/{activity.maxParticipants}</span>
              </div>
            </div>
          </div>
        </div>

        <div className="p-6">
          <p className="text-gray-700 mb-4 leading-relaxed">{activity.description}</p>

          <div className="space-y-3 mb-4">
            <div className="flex items-center space-x-3 text-sm text-gray-600">
              <Calendar className="w-4 h-4 text-primary-500" />
              <span>{activity.date} {activity.time}</span>
            </div>
            <div className="flex items-center space-x-3 text-sm text-gray-600">
              <MapPin className="w-4 h-4 text-primary-500" />
              <span>{activity.location}</span>
            </div>
            <div className="flex items-center space-x-3 text-sm text-gray-600">
              <Users className="w-4 h-4 text-primary-500" />
              <span>指导老师：{activity.instructor}</span>
            </div>
            <div className="flex items-center space-x-3 text-sm text-gray-600">
              <Clock className="w-4 h-4 text-primary-500" />
              <span>{activity.requirements}</span>
            </div>
          </div>

          {/* 报名进度条 */}
          <div className="mb-4">
            <div className="flex items-center justify-between text-sm mb-2">
              <span className="text-gray-600">报名进度</span>
              <span className={cn(
                "font-medium",
                isFull ? "text-red-600" : isAlmostFull ? "text-orange-600" : "text-primary-600"
              )}>
                {activity.currentParticipants}/{activity.maxParticipants}
              </span>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div
                className={cn(
                  "h-2 rounded-full transition-all duration-300",
                  isFull ? "bg-red-500" : isAlmostFull ? "bg-orange-500" : "bg-primary-500"
                )}
                style={{ width: `${Math.min(progress, 100)}%` }}
              ></div>
            </div>
            {isAlmostFull && !isFull && (
              <p className="text-orange-600 text-xs mt-1">🔥 即将满员</p>
            )}
            {isFull && (
              <p className="text-red-600 text-xs mt-1">已满员</p>
            )}
          </div>

          {/* 活动亮点 */}
          <div className="mb-6">
            <h4 className="font-medium text-gray-800 mb-2">活动亮点</h4>
            <div className="flex flex-wrap gap-2">
              {activity.highlights.map((highlight, index) => (
                <span key={index} className="px-2 py-1 bg-primary-50 text-primary-600 rounded-full text-xs">
                  ✨ {highlight}
                </span>
              ))}
            </div>
          </div>

          {/* 报名按钮 */}
          <button
            disabled={isFull}
            className={cn(
              "w-full py-3 rounded-2xl font-medium transition-all duration-200",
              isFull
                ? "bg-gray-300 text-gray-500 cursor-not-allowed"
                : "bg-gradient-to-r from-primary-500 to-primary-600 text-white hover:from-primary-600 hover:to-primary-700 shadow-lg hover:shadow-xl"
            )}
          >
            {isFull ? '已满员' : '立即报名'}
          </button>
        </div>
      </motion.div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-cream-50 to-sky-50">
      <div className="container mx-auto px-4 py-8">
        {/* 页面标题 */}
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-2 flex items-center justify-center">
            <Calendar className="w-8 h-8 text-primary-500 mr-3" />
            亲子活动
          </h1>
          <p className="text-gray-600">丰富多彩的亲子活动，让阅读更有趣</p>
        </div>

        {/* 活动分类筛选 */}
        <div className="bg-white rounded-2xl p-6 shadow-lg mb-8">
          <div className="flex flex-wrap gap-3">
            {['全部', '故事会', '手工课', '户外活动', '创作课'].map((category) => (
              <button
                key={category}
                className={cn(
                  "px-4 py-2 rounded-full transition-all duration-200",
                  "bg-primary-100 text-primary-700 hover:bg-primary-200"
                )}
              >
                {category}
              </button>
            ))}
          </div>
        </div>

        {/* 活动列表 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {activities.map((activity) => (
            <ActivityCard key={activity.id} activity={activity} />
          ))}
        </div>

        {/* 活动特色介绍 */}
        <div className="mt-12 bg-white rounded-3xl p-8 shadow-lg">
          <h2 className="text-2xl font-bold text-center text-gray-800 mb-8">为什么选择我们的活动</h2>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div className="text-center">
              <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <Users className="w-8 h-8 text-primary-600" />
              </div>
              <h3 className="font-bold text-gray-800 mb-2">专业导师</h3>
              <p className="text-gray-600 text-sm">经验丰富的专业导师，确保活动质量</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-sky-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <Star className="w-8 h-8 text-sky-600" />
              </div>
              <h3 className="font-bold text-gray-800 mb-2">精选内容</h3>
              <p className="text-gray-600 text-sm">精心设计的活动内容，寓教于乐</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-leaf-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <Calendar className="w-8 h-8 text-leaf-600" />
              </div>
              <h3 className="font-bold text-gray-800 mb-2">灵活安排</h3>
              <p className="text-gray-600 text-sm">多样化的活动时间，适应不同家庭需求</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <MapPin className="w-8 h-8 text-orange-600" />
              </div>
              <h3 className="font-bold text-gray-800 mb-2">便利地点</h3>
              <p className="text-gray-600 text-sm">选择便利的活动地点，交通便捷</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Activities